<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        <Form label-position="right" :label-width="80" inline>

          <Select v-model="model1" style="width:150px" placeholder="请选择国家">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:150px" placeholder="请选择省份">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:150px" placeholder="请选择城市" disabled>
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:150px" placeholder="请选择区县" disabled>
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>


          <Button type="primary" icon="ios-search" loading>搜索</Button>
          <Button type="ghost">统计导出</Button>
          <Poptip class="pull-right" placement="bottom-end">
            <Button>说明</Button>
            <div slot="content">
              说明：<br>
              1、待更换设备统计模块可通过查询条件，查询不同地区或站点的待更换设备统计<br>
              2、搜索条件国家项默认为中国，<br>
              当搜索条件选择至国家时，统计图为各省市的待更换设备数据统计；<br>
              当搜索条件选择至省份时，统计图为各城市的待更换设备数据统计；<br>
              当搜索条件选择至城市时，统计图为各区县的待更换设备数据统计；<br>
              当搜索条件选择至区县时，统计图为各站点的待更换设备数据统计；<br>
              3、点击统计导出，统计当前及统计图结果导出为Excel表。
            </div>
          </Poptip>

        </Form>
      </div>

      <div id="chart"></div>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  #chart{
    width: 100%;
    height: 600px;
    margin: 10px auto;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  export default {
    beforeMount () {

    },
    mounted() {
      //this.getList();
      this.initChart()
    },
    data () {
      return {
        loading: true,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
        option:{},
      }
    },
    methods: {
      initChart(){
        let $this = this;
        $this.option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            }
          },
          title: {
            text: '站点储量统计图',
            left: 'center'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data:['储存量','剩余量']
          },
          grid: {
            top: 60,
            bottom: 30
          },
          yAxis: {
            type: 'value',
            position: 'top',
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#cfc3bd'
              }
            },
          },
          xAxis: {
            splitNumber: 25,
            type: 'category',
            axisLine: {
              lineStyle: {
                type: 'solid',
              }
            },
            axisLabel: {
              show: true,
              rotate: 0,

            },
            axisTick: {
              show: true
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#cfc3bd'
              }
            },
            data: ['Oct', 'Sep', 'Aug', 'July', 'June', 'May', 'Apr', 'Mar', 'Feb', 'Jan']
          },
          series: [{
            name: '储存量',
            type: 'bar',
            barGap: '-100%',
            label: {
              normal: {
                position: 'left',
                show: false,
                formatter: '{b}'
              }
            },
            itemStyle: {
              normal: {
                color: '#E5F9FB',
                borderWidth: 2,
                borderColor: '#ff6347'

              }
            },
            data: [6470, 6470, 6470, 6470,6470, 6470, 6470, 6470, 6470, 6470]
          }, {
            name: '剩余量',
            type: 'bar',
            silent: true,
            barGap: '-100%',
            data: [100, 1000, 800, 1070, 900, 300, 1200, 900, 1200, 200],
            itemStyle: {
              normal: {
                color: '#ff6347',

              }
            },

          }]
        }

        var echartsOne = document.getElementById('chart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.option);
      },
    }
  };
</script>
